<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/index.js"></script>
    <title>Document</title>
</head>
<body>
<div id="file">
    <div style="padding: 0 8px 0;">文件管理
        <el-upload
                ref="upload"
                style="float: right"
                name="file"
                :on-success="uploadSuccess"
                action="/dao/update/fileUpload">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
    </div>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="日期">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="文件ID"
                prop="fid">
        </el-table-column>
        <el-table-column
                label="文件名称"
                prop="name">
        </el-table-column>
        <el-table-column
                label="文件大小"
                prop="size">
        </el-table-column>
        <el-table-column
                label="上传者"
                prop="person">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        circle
                        type="success"
                        icon="el-icon-download"
                        @click="handleDownload(scope.$index, scope.row)">
                </el-button>
                <el-button
                        size="mini"
                        circle
                        icon="el-icon-delete"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            style="float: right;margin-top: 10px;"
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="8"
            layout="prev, pager, next"
            :total="totalPage">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el: "#file",
        data() {
            return {
                tableData: [],
                fileList: [],
                search: '',
                currentPage: 1,
                totalPage: 1,
            }
        },
        created: function () {
            this.getList();
        },
        watch: {
            search(curVal, oldVal) {
                this.getList();
            }
        },
        methods: {
            getList() {
                let here = this;
                let union = {
                    currentPage: here.currentPage,
                    search: here.search
                };
                union = encodeURIComponent(JSON.stringify(union));
                axios({
                    method: 'post',
                    url: '/dao/fileList',
                    data: union
                }).then(function (response) {
                    let json = JSON.parse(decodeURIComponent(response.data));
                    here.tableData = json.tableData;
                    here.totalPage = json.totalPage;
                });
            },
            handleDownload(index, row) {
                window.open("http://localhost:8080/download?fileName="+ row.name);
            },
            handleDelete(index, row) {
                let here = this;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: '/dao/update/fileDelete',
                        data: row
                    }).then(function (response) {
                        let data = JSON.parse(decodeURIComponent(response.data));
                        if(data.success === "1"){
                            here.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            here.getList();
                        } else {
                            here.$message("不能删除");
                        }
                    });
                }).catch(() => {
                    here.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleCurrentChange(val) {
                this.getList();
            },
            uploadSuccess(response, file) {
                this.$refs.upload.clearFiles();
                let data = JSON.parse(decodeURIComponent(response));
                if (data.success === "1") {
                    this.$message({
                        type: 'success',
                        message: '上传成功'
                    });
                    this.getList();
                } else {
                    this.$message.error("上传失败");
                }

            }
        },
    });
</script>
</html>
